<template>
  <div class="g-dialog-panel leverage">
    <div class="g-dialog-title">
      <span>Leverage</span>
      <div class="g-clickable close" @click="close">
        <i class="iconfont icon-close"></i>
      </div>
    </div>
    <div class="leverage__content">
      <div class="tip">
        <p>
          All cross positions under the same margin asset share the same asset
          cross margin balance. In the event of liquidation, your assets full
          margin balance along with any remaining open positions under the asset
          may be forfeited.
        </p>
      </div>
      <on-percent
        v-model="leverage"
        :max-leverage="maxLeverage"
        :decimal="0"
        unit="X"
      />
      <div class="label">
        <span>Leverage</span>
        <span>{{ leverage }}X</span>
      </div>
      <div class="button g-clickable confirm">
        <span>Confirm</span>
      </div>
      <div class="button g-clickable cancel" @click="close">
        <span>Cancel</span>
      </div>
    </div>
  </div>
</template>

<script>
import OnPercent from "@/components/percent";
export default {
  components: {
    OnPercent,
  },
  data() {
    return {
      leverage: 5,
      maxLeverage: 100,
    };
  },
  methods: {
    close() {
      this.$emit("close");
    },
  },
};
</script>

<style lang="scss" scoped>
.leverage {
  &__content {
    .tip {
      margin: 20px 0;
      padding: 10px;
      border-radius: 8px;
      background-color: rgba(255, 255, 255, 0.03);

      p {
        line-height: 1.6;
        font-size: 12px;
        font-family: "Roboto Regular";
        color: var(--color-content);
      }
    }

    .label {
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 25px;

      span {
        font-size: 12px;
        font-family: "Roboto Regular";
        color: var(--color-content);
      }
    }

    .button {
      cursor: pointer;
      height: 45px;
      display: flex;
      align-items: center;
      justify-content: center;

      span {
        font-size: 14px;
        font-family: "Roboto Medium";
        color: var(--color);
      }

      &.confirm {
        border-radius: 5px;
        background-color: var(--color-green);
      }

      &.cancel {
        span {
          color: var(--color-content);
        }
      }
    }
  }
}
</style>
